<template>
  <div class="pop-up-child">
    <header class="header">
      <p class="title">我的本场奖品</p>
      <div class="close" @click="close">
        <van-icon style="font-size:1.5rem" class="close-icon" name="cross" />
      </div>
    </header>
    <div class="no-prize-box" v-if="isNoPrzize">
      <img src="../../../../assets/images/no-prize.png" />
    </div>
    <div class="list-content" v-if="!isNoPrzize">
      <ul>
        <li v-for="(v, index) of lotteryArray" :key="index">
          <div class="left-box">
            <div class="mark-box">
              {{ v.prizeType == "1" ? "奖品" : "礼券" }}
            </div>
            <template v-if="v.prizeType == '1'">
              <img :src="v.picUrl || defaultPngSW" />
            </template>
            <template v-if="v.prizeType == '2'">
              <img :src="v.picUrl || defaultPngLQ" />
            </template>
          </div>
          <div class="middle-box">
            <p class="top-text">{{ v.prizeNm }}</p>
            <p class="middle-text">中奖时间：{{ v.crtTime }}</p>
            <p class="bottom-text">
              {{ v.effeStartTime.slice(0, 10) }} 至
              {{ v.effeEndTime.slice(0, 10) }}
            </p>
          </div>
          <template v-if="v.expire">
            <div class="btn-gray" @click="clickSingleLottery(v)">已过期</div>
          </template>
          <template v-else>
            <div class="btn" @click="clickSingleLottery(v)">查看</div>
          </template>
        </li>
      </ul>
      <p class="tip-text">
        *平台所获全部奖品请至“返回直播首页-我的-我的奖品礼券”查看
      </p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    liveWinArray: Object, //直播间中奖数组
  },
  data() {
    return {
      lotteryArray: this.liveWinArray,
      isNoPrzize: false,
      defaultPngSW: require("@/assets/images/choujiang/shiwu.png"),
      defaultPngLQ: require("@/assets/images/choujiang/liquan.png"),
    };
  },
  created() {
    if (this.lotteryArray.length) {
      this.isNoPrzize = false;
    } else {
      this.isNoPrzize = true;
    }
  },
  methods: {
    clickSingleLottery(v) {
      //查看 已经过期
      this.$emit("findPrize",v);
    },
    close() {
      this.$emit("close");
    },
  },
};
</script>
<style scoped="scoped">
.no-prize-box {
  width: 100vw;
  max-height: 520px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.no-prize-box img {
  width: 686px;
  height: 388px;
}
.no-prize-box p {
  font-size: 30px;
  font-weight: 400;
  color: #999999;
  margin-bottom: 20px;
}
.pop-up-child {
  width: 100%;
  background: #fff;
  position: relative;
  z-index: 1501;
  border-radius: 20px 20px 0px 0px;
}

.pop-up-child .header {
  line-height: 90px;
  text-align: center;
  position: relative;
}

.pop-up-child .title {
  font-size: 37px;
  font-weight: 400;
  color: #353635;
}

.pop-up-child .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 0;
}

.pop-up-child .iconcha1 {
  padding: 0 30px;
  font-size: 18px;
  color: #c8c9cc;
}

.list-content {
  width: 100%;
  padding: 0 30px 0;
  max-height: 520px;
  overflow-y: scroll;
}

.tip-text {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 22px;
  font-weight: 400;
  color: #ff0000;
}
.list-content ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.list-content ul li {
  width: 722px;
  height: 201px;
  background: #ffffff;
  margin: 17px 0 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
/*这里高度后面要判断zyzq的高度*/
.list-content {
  width: 100vw;
  /* background: darkcyan; */
  overflow-y: scroll;
}
.prize-list-box {
  width: 100vw;
  height: 100vh;
  background: #f7f7f7;
  overflow: hidden;
}
.minePrize-box-title {
  position: relative;
  background: white;
}
.minePrize-box-title p {
  width: 100%;
  height: 80px;
  font-size: 36px;
  text-align: center;
  line-height: 80px;
  color: #333333;
}
.noprize-box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 300px;
}
.noprize-box img {
  width: 326px;
  height: 326px;
}
.noprize-box p {
  width: 100%;
  height: 40px;
  color: #c5c5c5;
  font-size: 28px;
  text-align: center;
}
.left-box img {
  width: 155px;
  height: 155px;
}
.mark-box {
  width: 72px;
  height: 32px;
  background: rgba(0, 0, 0, 0.6);
  /*opacity: 0.6;*/
  line-height: 32px;
  text-align: center;
  position: absolute;
  top: 0;
  left: 0;
  font-size: 19px;
  color: white;
}
.middle-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin: 20px 0;
  color: #999999;
}
.bottom-text {
  margin: 20px 0;
  color: #999999;
}
.top-text {
  font-size: 32px;
  color: black;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.middle-box {
  width: 331px;
  /*background: salmon;*/
  margin-left: 38px;
  font-size: 22px;
}
.left-box {
  width: 155px;
  height: 155px;
  background: #ffffff;
  border: 1px solid #ededed;
  margin-left: 26px;
  position: relative;
}
.btn {
  width: 133px;
  height: 55px;
  background: linear-gradient(-50deg, #f2324c, #ff6c7f);
  border-radius: 27px;
  color: #ffffff;
  font-size: 28px;
  line-height: 55px;
  text-align: center;
  margin-right: 17px;
  margin-left: 23px;
}
.btn-gray {
  width: 133px;
  height: 55px;
  background: #e2e2e2;
  border-radius: 27px;
  color: #ffffff;
  font-size: 28px;
  line-height: 55px;
  text-align: center;
  margin-right: 17px;
  margin-left: 23px;
}
</style>
